import React from 'react';
import { Review } from '@/components';
import { Tooltip, message } from 'antd';
import styles from '../style.moudle.scss';
import Copy from 'react-copy-to-clipboard';
import { ListItem } from '@/service/image/getImageList';

type Props = {
  item: ListItem;
  itemIndex: number;
  containerWidth: number;
}

class CardItem extends React.PureComponent<Props> {
  static defaultProps = {
    item: {},
    itemIndex: 0,
    containerWidth: 0
  }

  get item() {
    return this.props.item;
  }

  private onCopySuccess = () => {
    message.success('已复制到剪切板！');
  }

  get curStyle() {
    const count = 7;
    const { containerWidth } = this.props;
    const width = containerWidth / count - 12 * (count - 1) / count;

    return {
      width: `${width}px`,
      height: `${width}px`
    }
  }

  get control() {
    const { imgUrl } = this.item;
    return (
      <div className={styles.mask_control}>
        <div className={styles.mask_control_item}>使用</div>
        <Review imgUrl={imgUrl}>
          <div
            children="查看"
            className={styles.mask_control_item}
          />
        </Review>
        <Copy text={imgUrl} onCopy={this.onCopySuccess}>
          <div className={styles.mask_control_item}>复制链接</div>
        </Copy>
      </div>
    )
  }

  render() {
    const { name, imgUrl } = this.item;
    return (
      <div className={styles.image_item} style={this.curStyle}>
        <div className={styles.image_item_content}>
          <div className={styles.image}>
            <img src={imgUrl} alt={name}/>
            {this.control}
          </div>
          <div className={styles.footer}>
            <div className={styles.image_name}>
              <Tooltip title={name} children={name}/>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CardItem;
